<template>
  <div id="gameWal">
    <div id="gameBox" v-for="(Wal, index) in walList" :key="Wal.walId" @click="openWal(index)">
      <div id="userNav">
        <div id="headImg"><img :src="Wal.headImg" alt=""></div>
        <div id="userInfo" class="toRight-10">
          <span id="nickName">{{Wal.nickname}}</span>
          <span id="pushTime">{{Wal.walTime}}</span>
        </div>
      </div>
      <div id="walContent">
        <div><h3>{{Wal.walTitle}}</h3></div>
<!--        <span>{{Wal.walContentNoTag}}</span>-->
      </div>
    </div>
    <div id="pushWal" class="boxShadow-white animate__animated animate__zoomIn" style="animation-duration: 300ms">
      <span>攻略标题：</span>
      <input type="text" id="walTitle" class="input-40" placeholder="请填写攻略标题,好的标题可以吸引读者！"><br>
      <div class="cutLineHf"></div>
      <span>撰写游戏攻略</span><br>
      <mavon-editor id="editor" v-model="walContent" ref="wal"/>
      <button class="input-100" @click="pushGameWal">发布</button>
    </div>
    <div id="pushWalIcon" v-if="loginState">
      <svg t="1622708076551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2677" width="35" height="35"><path d="M703.439 199.558l-131.996 137.51-51.601 53.718-46.509 48.417c-14.012 14.592-53.177 54.347-62.523 64.293-9.345 9.949-15.292 16.249-17.836 18.902-5.947 6.19-10.514 11.828-13.698 16.913-3.184 5.09-6.058 10.72-8.601 16.911-2.125 3.982-4.882 11.274-8.28 21.893-3.401 10.607-6.903 22.211-10.518 34.814-3.606 12.602-7.006 24.762-10.189 36.48-3.188 11.711-5.202 20.664-6.052 26.862-1.699 11.49-0.64 19.673 3.184 24.54 3.823 4.858 11.469 6.629 22.933 5.3 5.524-0.883 13.914-2.873 25.169-5.97 11.255-3.093 23.144-6.741 35.673-10.941 12.528-4.201 24.528-8.511 35.998-12.929 11.469-4.426 20.17-8.182 26.117-11.283 5.948-2.648 11.681-6.186 17.203-10.608 5.522-4.42 10.405-8.619 14.652-12.602 1.699-1.322 7.008-6.632 15.923-15.916 8.92-9.287 20.18-21.115 33.77-35.484 13.588-14.365 56.367-57.659 73.354-74.904l50.966-53.724L823.6 321.124 703.439 199.558zM617.567 491.684l-31.86 32.074c-10.62 10.297-37.36 36.142-45.856 44.718-8.494 8.58-15.535 15.64-21.11 21.186-5.574 5.544-8.89 8.712-9.953 9.503-2.656 2.375-5.708 4.884-9.161 7.521-3.45 2.643-7.034 4.753-10.752 6.336-3.718 1.853-9.157 4.092-16.328 6.737-7.17 2.636-14.67 5.209-22.503 7.716-7.831 2.508-15.265 4.685-22.301 6.532-7.035 1.849-12.282 3.039-15.734 3.564-7.166 0.795-11.946-0.265-14.336-3.163-2.389-2.905-3.052-7.79-1.99-14.649 0.531-3.703 1.791-9.046 3.784-16.041 1.989-6.995 4.114-14.254 6.368-21.778 2.262-7.523 4.451-14.452 6.576-20.783 2.125-6.337 3.849-10.693 5.176-13.071 1.589-3.693 3.387-7.056 5.376-10.095 1.99-3.034 4.846-6.402 8.563-10.097 1.59-1.585 5.309-5.345 11.149-11.285 5.843-5.939 251.127-251.645 251.127-251.645l75.324 74.383L617.567 491.684z" p-id="2678"></path><path d="M863.461 413.571l0 198.483 0 123.681 0-0.74L863.461 761.2c0 67.902-55.265 123.137-123.135 123.137L591.182 884.337l-0.011 0L432.443 884.337l-0.012 0L283.286 884.337c-67.869 0-123.133-55.234-123.133-123.137l0-27.662 0-0.268L160.153 413.648 160.153 288.153l0 1.811 0-25.467c0-67.902 55.264-123.132 123.133-123.132l149.145 0 90.026 0 41.229 0 21.024 0 83.39-70.319-27.485 0L640.615 71 283.286 71C179.75 71 94.916 152.774 90.022 255.151l-0.231 0 0 9.346 0 1.634 0 0L89.791 761.2l0 9.345 0.231 0c4.894 102.377 89.728 184.151 193.264 184.151l3.515 0 450.012 0 3.513 0c103.538 0 188.373-81.774 193.266-184.151l0.23 0L933.822 761.2 933.822 344.459 863.461 413.571 863.461 413.571zM863.461 413.571" p-id="2679"></path><path d="M846.776 98.764c-4.534-0.845-9.003-1.236-13.339-1.176 0.645 0 1.295 0 1.947 0.021C839.246 97.748 843.041 98.134 846.776 98.764L846.776 98.764zM846.776 98.764" p-id="2680"></path><path d="M922.68 188.441c0.695-12.429-2.594-26.078-9.55-39.126-4.717-8.843-11.106-17.413-19.095-25.124-14.301-13.804-31.153-22.426-47.259-25.421-3.729-0.63-7.53-1.016-11.392-1.154-0.646-0.027-1.297-0.021-1.947-0.027-7.047-0.039-14.201 1.065-21.461 3.332-7.938 2.483-15.608 6.748-23.017 12.804-5.822 4.956-13.097 11.708-21.826 20.242-8.727 8.542-16.27 15.835-22.618 21.892l119.546 121.517c3.702-3.304 7.669-7.16 11.906-11.568 3.702-3.85 8.065-8.26 13.097-13.218 5.02-4.955 10.708-10.737 17.06-17.347 5.819-6.608 10.051-13.499 12.698-20.655 2.643-7.161 3.967-14.321 3.967-21.482C922.789 191.536 922.746 189.984 922.68 188.441zM892.396 205.569c-1.811 4.896-4.705 9.61-8.688 14.131-4.345 4.521-8.233 8.478-11.669 11.867-3.441 3.392-6.427 6.408-8.96 9.042 2.533-2.259-2.898 3.015 0 0l-82.525-82.328c4.344-4.144 2.104-2.019 8.076-7.861 5.97-5.839 10.947-10.458 14.928-13.847 5.069-4.144 10.313-7.06 15.745-8.759 4.969-1.551 9.864-2.306 14.683-2.28 0.445 0.004 0.89 0 1.333 0.02 2.641 0.095 5.24 0.358 7.792 0.79 11.017 2.049 22.547 7.947 32.329 17.39 5.464 5.274 9.834 11.137 13.063 17.188 4.758 8.925 7.008 18.262 6.532 26.765 0.045 1.055 0.075 2.117 0.075 3.188C895.109 195.773 894.203 200.672 892.396 205.569z" p-id="2681"></path></svg>
    </div>

    <wal-info-list id="walSpace" :showWalInfo="showWal"/>
    <div v-if="walList.length === 0" style="width: 100%;display: flex;justify-content: center;align-items: center;flex-flow: column">
      <img src="../../../../assets/icon/nullImg_2.svg" style="width: 300px;height: 300px;" alt="">
      <span style="font-weight: 200;color: #bfc9d9">快发布第一条攻略！</span>
    </div>
  </div>
</template>

<script>
  import $ from "jquery";
  import wangEditor from "../../../wangEditor/wangEditor";
  import walInfoList from "../../../functional unit/walInfoList";
  // import markdownEditor from "../../../markdownEditor/markdownEditor";
  // import tinymceEditor from "../../../tinymceEditor/tinymceEditor";
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  export default {
    name: 'gameWal',
    props:['pushGameId'],
    data(){
      return{
        walList:[],
        loginState: true,
        isWalShow:false,
        walContent: '',
        showWal:{},
      }
    },
    watch:{
      pushGameId: function(val){
        this.getGameWal(val)
      },
      deep: true,
      immediate: true,
    },
    components:{
      // wangEditor,
      walInfoList,
      mavonEditor,
      // markdownEditor,
      // tinymceEditor,
    },
    created() {
      this.getGameWal(this.pushGameId)
      this.isLogin()
    },
    mounted() {

      $(function () {
        $('#pushWalIcon').click(function(){
          $('#pushWal').toggle()
          return false;//阻止冒泡
        });
        //
        $('#pushWal').click(function(){
          return false;
        });

        // $(document).click(function(){
        //   $('#pushWal').css('display','none').hide();
        // });

      })


    },
    methods:{
      openWal(index){
        $('#walSpace').css('display','block')
        this.showWal = this.walList[index]
        // console.log(this.walList[index])
      },
      async pushGameWal(){
        if(await this.userRoot() === 400){
          this.$message.error('账号已封禁,无法操作')
        }else{
          const walTitle = $('#walTitle').val()
          const walContent = this.walContent
          // console.log(walTitle)
          const gameId = this.pushGameId
          if(walContent !== '' && walTitle !== ''){
            const walArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              walContent: this.$refs.wal.d_render,
              walTime: this.dayjs().format('YYYY-MM-DD HH:mm:ss'),
              gameId: gameId,
              walContentNoTag: this.clearTag(this.$refs.wal.d_render),
              walTitle: walTitle,
            }
            console.log(walArr)
            const {data:res} = await this.$axios.post('v1/pushGameWal',walArr)
            if(res.code === 200){
              await this.getGameWal(gameId)
              this.$message.success("发布成功")
            }
          }
          else{
            this.$message.warning("请填写攻略标题或影评！")
          }
        }
      },
      async getGameWal(data){
        const {data:res} = await this.$axios.post('v1/getGameWal',{gameId:data})
        if(res.code === 200){
          const newWal = res.data
          this.walList = newWal.reverse()
        }else{
          console.error("请检查网络配置！")
        }
      },
      isLogin(){
        if(sessionStorage.token){
          this.loginState = true
        }else{
          this.loginState = false
        }
      },
      async userRoot(){
        if(this.loginState === true){
          const {data:res} = await this.$axios.post('v1/judgeRoot',{userId:JSON.parse(sessionStorage.user).userId})
          return res.data.rootCode
        }
      },
      change(val) {
        console.log(val)
      },
      getContent () {
        console.log('内容', this.msg)
      },
      // 鼠标单击的事件
      onClick (e, editor) {
        console.log('Element clicked')
        console.log(e)
        console.log(editor)
      },
      // 清空内容
      clear () {
        console.log(this.$refs.editor)
        this.$refs.editor.clear()
      }
    }

  }
</script>

<style lang="less" scoped>
  #gameWal{
    padding-bottom: 20px;

    #gameBox{
      width: 50%;
      background-color: #d8d8df;
      border-radius: 6px;
      margin-bottom: 10px;
      white-space: pre-wrap;
      word-break: break-all;
      transition: all 0.1s ease-in-out;
    }
    #gameBox:hover{
      box-shadow: -5px 5px 0 #b4b4b4;
      transform: translate3d(5px, -5px, 0);
    }
    #headImg{
      width: 30px;
      height: 30px;
      background-color: black;
      border-radius: 6px;
      margin-left: 20px;

      img{
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    /*.showWal{*/
    /*  display: block!important;*/
    /*}*/
    #walSpace{
      display: none;
    }
    #userNav{
      display: flex;
      background-color: var(--theme-userBox);
      align-items: center;
      height: 42px;
      border-radius: 4px 4px 0 0;
      position: relative;
      color: var(--theme-fontMain);

    }
    #userInfo{
      display: flex;
      flex-flow: column;
    }
    #nickName{
      font-size: 14px;
      font-weight: 700;
    }
    #pushTime{
      font-size: 12px;
    }
    #walContent{
      /*width: 400px;*/
      padding: 10px 20px;
      font-size: 14px;
      overflow: hidden;
      background-color: var(--theme-userContent);
      color: var(--theme-fontMain);
      border-radius: 0 0 4px 4px;
      span{
        /*width: 200px;*/
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;  /* 设置行数 */
        -webkit-box-orient: vertical;
      }

    }
    #likeIcon{
      width: 92px;
      height: 32px;
      border-radius: 4px;
      background-color: white;
      font-size: 16px;
      margin: 20px;
      transition: all 0.1s ease-in-out;
      cursor:pointer;
    }
    #likeIcon:hover{
      background-color: #1f1f1f;
      color: white;
    }
    #pushWal{
      display: none;
      flex-flow: column;
      backdrop-filter: blur(30px);
      /*width: 690px;*/
      width: 80%;
      padding: 20px;
      border-radius: 6px;
      position: fixed;
      margin: auto;
      /*right: 100px;*/
      /*bottom: 110px;*/
      top: 70px;
      left: 0;
      bottom: 20px;
      right: 0;
      z-index: +1;
      span{
        color: var(--theme-fontMain);
      }
      input{
        margin-bottom: 10px;
        margin-top: 5px;
        background-color: var(--theme-button);
        color: var(--theme-fontMain);
      }
      textarea{
        border-radius: 6px;
        height: 220px;
        resize: none;
        padding: 5px 10px;
        margin-right: 20px;
        white-space: normal;
        margin-top: 6px;
        margin-bottom: 20px;
      }
      select{
        border-radius: 4px;
        width: 40px;
        outline: none;
        border: none;
        text-align: center;

        option{
          text-align: center;
        }
      }

    }
    #pushWalIcon{
      width: 70px;
      height: 70px;
      background-color: var(--theme-button);
      border-radius: 50%;
      right: 40px;
      bottom: 40px;
      position: fixed;
      display: grid;
      place-items: center;
    }
    #editor{
      margin-bottom: 20px;
      margin-top: 5px;
      height: 490px;
    }
    svg{
      fill: var(--theme-fontMain);
    }

  }

</style>

